
<template>
  <div class="any-table">
    <el-table :data="list" style="width: 100%" size="medium">
      <slot name="column"></slot>
    </el-table>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from "vue";

  const props = defineProps({
    data: {
      type: Array,
      default: []
    }
  })

  const list = ref([])

  onMounted(() => {
    initData()
  })

  function initData() {
    list.value = props.data as []
  }

</script>

<style lang="scss">
  .any-table {
    .el-table--enable-row-transition .el-table__body td.el-table__cell {
      transition: none;
    }

    // hover 背景色
    .el-table--enable-row-hover .el-table__body tr:hover>td{
      background-color: $default-background !important;
    }
    
    .el-table {

      thead th:first-of-type {
        padding-left: 20px;
      }

      thead th:last-of-type {
        padding-right: 20px;
      }

      td:first-of-type {
        padding-left: 20px;
      }

      td:last-of-type {
        padding-right: 20px;
      }

      thead {
        tr {
          th {
            // background: #F8F8F9;
            font-weight: 500;
          }
        }
      }

      tr {
        height: 55px !important;
      }

      th {
        color: #76838f !important;
      }

      td {
        color: #76838f !important;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .any-table {
    // background-color: #fff;
    overflow: hidden;
    border-radius: 10px;
    // box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
  }
</style>
